<template>
  <div class="grid-content">
    <el-tabs  v-model="activeName" class="leftTabs">
      <el-tab-pane label="报项" name="first">
        <div class="pad20">
          <el-form :model="query" :inline="true">
            <el-form-item label="科目名称">
              <el-input v-model.trim="query.trainName" style="width:200px"/>
            </el-form-item>
            <el-form-item label="科目时间">
              <el-date-picker
                v-model="query.time"
                format="YYYY-MM-DD"
                type="daterange"
                value-format="YYYY-MM-DD"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="danger" @click="getList">查询</el-button>
            </el-form-item>
          </el-form>

          <el-table :data="list" style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="80"
              align="center"
            />
            <el-table-column label="培训名称" min-width="260" prop="trainName">
            </el-table-column>
            <el-table-column
              prop="startTime"
              label="科目开始时间"
              min-width="180"
            >
              <template #default="props">
                <div>{{ filterTime(props.row.startTime) }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="endTime"
              label="科目结束时间"
              min-width="180"
            >
              <template #default="props">
                <div>{{ filterTime(props.row.endTime) }}</div>
              </template>
            </el-table-column>
            <el-table-column label="审批状态" min-width="100" align="center">
              <template #default="scope">
                <el-tag
                  v-if="scope.row.auditStatusStr == '待审核'"
                  type="primary"
                  >{{ scope.row.auditStatusStr }}</el-tag
                >
                <el-tag
                  v-if="scope.row.auditStatusStr == '审核通过'"
                  type="success"
                  >{{ scope.row.auditStatusStr }}</el-tag
                >
                <el-tag
                  v-if="scope.row.auditStatusStr == '审核未通过'"
                  type="danger"
                  >{{ scope.row.auditStatusStr }}</el-tag
                >
                <el-tag
                  v-if="scope.row.auditStatusStr == '待支付'"
                  type="warning"
                  >{{ scope.row.auditStatusStr }}</el-tag
                >
                <el-tag
                  v-if="scope.row.auditStatusStr == '未提交'"
                  type="warning"
                  >{{ scope.row.auditStatusStr }}</el-tag
                >
                <el-tag
                  v-if="scope.row.auditStatusStr == '已取消'"
                  type="info"
                  >{{ scope.row.auditStatusStr }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              fixed="right"
              class-name="small-padding"
              width="200"
            >
              <template #default="scope">
                <el-button
                  v-if="scope.row.auditStatusStr != '未提交'"
                  type="text"
                  @click="particulars(scope.row)"
                  >详情</el-button
                >
                <el-button
                  v-if="scope.row.auditStatusStr == '待支付'"
                  type="text"
                  @click="signRow(scope.row)"
                  >支付</el-button
                >
                <el-button
                  v-if="scope.row.auditStatusStr == '未提交'"
                  type="text"
                  @click="trainUp(scope.row)"
                  >提交</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 详情弹框 -->
    <el-dialog v-model="dialog" title=" 订单详情" width="50%">
      <div>
        <div class="dialog-title">{{ order.trainName }}</div>
        <div>
          <el-descriptions title="订单基本信息" :column="2" border>
            <el-descriptions-item label="订单编号：">{{
              order.orderId
            }}</el-descriptions-item>
            <el-descriptions-item v-if="order.payTime" label="下单时间：">{{
              order.payTime
            }}</el-descriptions-item>

            <!-- <el-descriptions-item v-if="order.groupName" label="报名团队：">{{
            order.groupName
          }}</el-descriptions-item> -->
            <el-descriptions-item label="支付方式：">
              {{ order.payTypeStr }}
            </el-descriptions-item>
            <el-descriptions-item label="订单状态：">
              {{ order.auditStatusStr }}
            </el-descriptions-item>
            <el-descriptions-item label="订单金额：">
              <el-tag v-if="order.needPay == '0'">免费订单</el-tag>
              <span v-else class="orange">{{ order.totalAmount }}元</span>
            </el-descriptions-item>
            <el-descriptions-item
              v-if="order.totalPayAmount"
              label="付款金额："
            >
              <span class="orange">{{ order.totalPayAmount }}元</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div v-if="order.payTypeStr == '线下支付'">
          <el-descriptions class="mt20" title="收款方" border>
            <el-descriptions-item label="收款方：">{{
              billData.accountBank
            }}</el-descriptions-item>
            <el-descriptions-item label="开户银行：">{{
              billData.accountBank
            }}</el-descriptions-item>
            <el-descriptions-item label="银行账号：">{{
              billData.accountNum
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div>
          <h3 class="h3">明细费用</h3>
          <el-collapse v-model="activeCollapse">
            <el-collapse-item name="1" v-if="trainList?.length > 0">
              <template #title>
                <div class="titlebar">
                  培训科目费
                  <div class="fr">
                    合计:<span class="money"
                      >{{ order?.examFee * 1 + order?.projectFee * 1 }}元</span
                    >
                  </div>
                </div>
              </template>
              <div>
                <el-table border :data="trainList" style="width: 100%">
                  <el-table-column type="index" label="序号" width="50" />
                  <el-table-column label="科目类型" prop="type" />
                  <el-table-column label="科目名称" prop="projectName" />
                  <el-table-column label="必报科目" prop="is" />
                  <el-table-column label="科目费用" prop="cost" />
                </el-table>
              </div>
            </el-collapse-item>
            <el-collapse-item name="2" v-if="order?.hotelList?.length > 0">
              <template #title>
                <div class="titlebar">
                  食宿费
                  <div class="fr">
                    合计:<span class="money">{{ order?.hotelFee }}元</span>
                  </div>
                </div>
              </template>
              <div>
                <el-table border :data="order?.hotelList" style="width: 100%">
                  <el-table-column type="index" label="序号" width="50" />
                  <el-table-column label="酒店名称" prop="name" />
                  <el-table-column label="酒店地址" prop="address" />
                  <el-table-column label="房型" prop="houseType" />
                  <el-table-column label="入住时间" prop="moveIntoTimeStr" />
                  <el-table-column label="费用" prop="cost" />
                </el-table>
              </div>
            </el-collapse-item>
            <el-collapse-item name="3" v-if="order?.otherList?.length > 0">
              <template #title>
                <div class="titlebar">
                  其他费用
                  <div class="fr">
                    合计:<span class="money">{{ order?.otherFee }}元</span>
                  </div>
                </div>
              </template>
              <div>
                <el-table border :data="order?.otherList" style="width: 40%">
                  <el-table-column type="index" label="序号" width="50" />
                  <el-table-column label="费用类型" prop="name" />
                  <el-table-column label="费用" prop="spend" />
                </el-table>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      v-model="payPop"
      title="请选择支付方式"
      width="720px"
      @close="goMyMatch"
    >
      <div class="centerPrice">
        ¥<span>{{ totalAmount }}</span>
      </div>
      <div style="margin: 40px">
        <el-radio-group v-model="payType">
          <el-radio v-if="myBalance > '0'" label="2" size="large" border
            ><img src="@/assets/img/zf02.png" style="width: 30px" />
            会员卡支付<span
              >(余额 <i class="orange">¥{{ myBalance }}</i
              >)</span
            >
          </el-radio>
          <el-radio label="0" size="large" border
            ><img src="@/assets/img/zf_wx.png" />微信</el-radio
          >
          <el-radio label="1" size="large" border
            ><img src="@/assets/img/zf_xj.png" />线下支付</el-radio
          >
        </el-radio-group>
      </div>
      <div class="panel-footer text-center">
        <el-button type="success" round @click="payBill">立即支付</el-button>
      </div>
    </el-dialog>

    <el-dialog v-model="success" @close="goMyMatch">
      <el-result icon="success" title="支付成功" />
    </el-dialog>

    <el-dialog v-model="bankShow" title=" 线下支付" width="400px">
      <ul class="orgbox">
        <li>单位：{{ billData.accountName }}</li>
        <li>开户行：{{ billData.accountBank }}</li>
        <li>账户：{{ billData.accountNum }}</li>
        <li>
          打款金额：<span class="orange"
            >¥{{ (totalAmount * 1).toFixed(2) }}</span
          >
        </li>
      </ul>
      <template #footer>
        <div class="dialog-footer text-center">
          <el-button type="primary" @click="goMyMatch">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <we-pay ref="wePayRef" @close="goMyMatch" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getCurrentInstance, onMounted } from "@vue/runtime-core";
const router = useRouter();
const { proxy } = getCurrentInstance();
import * as train from "@/api/train/pc";
const list = ref([]);
const dialog = ref(false);
const activeName = ref("first");
const activeCollapse = ref(["1", "2", "3"]);
const trainList = ref([]);
const payPop = ref(false);
const myBalance = ref();
const totalAmount = ref();
const payType = ref("1");
const orderId = ref();
const bankShow = ref(false);
const success = ref(false);
const payShow = ref(false);
const lock = ref(true);
onMounted(() => {
  getList();
});
const data = reactive({
  query: {
    trainName: "",
    startTime: "",
    endTime: "",
  },
  order: {},
  billData: {},
});

const { query, order, billData } = toRefs(data);

async function getList() {
  if (query.value.time) {
    query.value.startTime = query.value.time[0];
    query.value.endTime = query.value.time[1];
  }
  let res = await train.myTrains(query.value);
  list.value = res.rows;
}

// 会员余额
async function balance(row) {
  let res = await train.balance({ trainId: row.trainId });
  myBalance.value = res.data.balance;
  console.log(myBalance.value);
}

// 订单详情
async function getOrder(row) {
  trainList.value = [];
  let res = await train.getOrderDetail({ orderId: row.orderId });
  order.value = res.data;
  order.value.orderId = row.orderId;
  totalAmount.value = res.data.totalAmount;
  res.data?.projectList?.forEach((item) => {
    item.type = "培训";
    item.isNecessary == 1 ? (item.is = "是") : (item.is = "否");
    trainList.value.push(item);
  });
  res.data?.examList?.forEach((item) => {
    item.type = "考试";
    item.isNecessary == 1 ? (item.is = "是") : (item.is = "否");
    trainList.value.push(item);
  });
}

// 获取银行账户信息
async function bankInfo(row) {
  let res = await train.bankInfo({ id: row.orderId });
  billData.value = res.data;
}

// 定单详情
async function particulars(row) {
  order.value = {};
  billData.value = {};
  getOrder(row);
  bankInfo(row);
  dialog.value = true;
}

// 订单支付
function pay() {
  return new Promise(async (resolve, reject) => {
    let res = await train.pay({ id: orderId.value, flag: payType.value });
    console.log(res);
    if (res.code == 200) {
      payShow.value = true;
      lock.value = true;
      if (payType.value == 2) success.value = true;
      if (payType.value == 0) return proxy.$refs["wePayRef"].open(res.data);
      if (payType.value == 1) bankInfo({ orderId: orderId.value });
      if (payType.value == 1) bankShow.value = true;

      return resolve("成功");
    } else {
      return reject("失败");
    }
  });
}

// 微信支付取消
function goMyMatch() {
  success.value = false;
  bankShow.value = false;
  payPop.value = false;
  getList();
}

// 支付
function signRow(row) {
  getOrder(row);
  balance(row);
  orderId.value = row.orderId;
  payPop.value = true;
}

// 立即支付
async function payBill() {
  if (payShow.value) return;
  if (lock.value) {
    lock.value = false;
    if (payType.value == null) return proxy.$modal.msgError("请选择支付方式！");
    await pay();
    lock.value = false;
  }
}

// 时间处理
function filterTime(num) {
  if (num) return num.slice(0, 16);
}

// 提交
function trainUp(row) {
  console.log(row.trainId, row.venueId);
  router.push({
    path: `/train/list/${row.trainId}/trainBill`,
    query: {
      id: row.trainId,
      venueId: row.venueId,
    },
  });
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/variables.module.scss';
.h3 {
  color: var(--el-text-color-primary);
  font-size: 16px;
  font-weight: 700;
}
.dialog-title {
  text-align: center;
  font-size: 16px;
  color: #000;
  font-weight: 400;
}
.centerPrice {
  text-align: center;
  font-size: 26px;
  margin: 20px;
  span {
    font-size: 40px;
    font-weight: bold;
  }
}
.app-container {
  background: #f5f7f9;
}

.grid-content {
  background: #fff;
}

:deep(.el-tabs__nav-wrap) {
  padding: 0 15px;
}
:deep(.el-radio.el-radio--large .el-radio__label) {
  display: flex;
  align-items: center;
  img {
    margin-right: 6px;
  }
}
.panel-footer .el-button--success {
  background: linear-gradient(270deg, $--color-primary,$--color-danger);
  border: none;
  padding: 0 40px;
  font-size: 16px;
}
.orange {
  font-size: 16px;
  font-style: normal;
  font-weight: bold;
}
.orgbox {
  font-size: 16px;
  line-height: 30px;
}
.money {
  color: #ff8124;
  margin: 0 6px;
}
</style>
